<template>
  <h3>{{ title }}</h3>
  <table class="document-table">
    <thead>
    <tr>
      <th v-for="(item,index) in tableHeaders" :key="index">{{ item }}</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(itemRow, indexRow) in body" :key="indexRow">
      <td v-for="(itemCol, indexCol) in itemRow" :key="indexCol">
        <template v-if="typeof itemCol === 'object'">
          <code v-for="val in itemCol" :key="val">{{ val }}</code>
        </template>
        <span v-else> {{ itemCol }}</span>

      </td>
    </tr>
    </tbody>
  </table>
</template>

<script lang="ts" setup>
import {computed} from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  type: {
    type: String,
    default: 'prop',
    values: ['prop', 'event', 'slot', 'methods']
  },
  body: {
    type: Array,
    default: []
  },
  headers: {
    type: Array,
    default: []
  }
})

const headerByType = {
  prop: ['属性', '说明', '数据类型', '是否必须','可选值', '默认值'],
  slot: ['插槽名', '说明'],
  event: ['事件名', '说明', '回调参数'],
  methods: ['方法名', '说明', '入参']
}

const tableHeaders = computed(() => {
  if (props.headers.length === 0) {
    const type = props.type
    return headerByType[type]
  }
  return props.headers
})
</script>

<style lang="scss" scoped>
.document-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 14px;

  tr {
    th, td {
      border-bottom: 1px solid #DCDFE6;
      padding: 0 10px;
    }

    th {
      height: 30px;
    }

    td {
      height: 50px;

      code {
        border-radius: 4px;
        background-color: #F5F7FA;
        margin: 0 10px 0 0;
        padding: 6px;
        font-weight: 500;
        font-family: "JetBrains Mono", source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
        &:last-child {
          margin: 0;
        }
      }
    }
  }
}
</style>